一、網頁也可以是活的

前面我們第一次成功讓方塊動起來了。這時候會開始期待：

如果我能讓網頁上的東西動起來，會變得多有趣呢？

這就是今天正式要認識的 GSAP。GSAP 是一個專門用來製作動畫的 JavaScript Library，可以讓我們更方便地控制網頁元素的動畫。

二、拆成幾個部分

這裡假設我想讓一個元素從左邊移到右邊。除了「移動多少」之外，我還會思考：

移動到哪裡？移動時間？什麼時候開始？移動的速度多快？

GSAP 就是把這些控制方式整理成比較好使用的工具。
例如前一天的測試：

gsap.to(".box", {
    x: 300,
    duration: 2
});

這裡：

x → 移動的位置
duration → 動畫持續時間

所以我們不用自己計算元素每一秒、甚至每一幀要移動多少，只要告訴 GSAP：
「我要它最後變成什麼樣子。」
GSAP 就會幫我們完成中間的動畫過程。

三、基本語法

在GSAP裡面有幾個很基本的語法，這裡先介紹最常使用到的

gsap.to()

可以先把它理解成：

「讓這個元素變成我指定的狀態。」
目前先讓大家知道 .to 的用法，這是 GSAP 很有趣的地方，另外還可以同一個元素，可以控制很多不同的變化，是不是很有趣呀。

四、結論

到這裡，我覺得 GSAP 跟原本寫 JavaScript 最大的差別已經慢慢浮現。不是每個動畫細節都要自己處理，而是我們可以把「想要的結果」告訴 GSAP，接下來就好好來玩GSAP吧!!

下一篇將會告訴你移動得更多使用方法。